<nav-root></nav-root>
<breadcrumb-root [breadcrumb]='breadcrumb'></breadcrumb-root>
<div class="box2">
    <div class="titlebox">
        <span class="title"> {{trainmsg.Title}}  <i style="margin-left: 10px;" class="anticon i1 anticon-plus-circle" (click)="addwindow=true;"></i></span>
        <div class="subtitle" style="margin-top: 10px;">
            <span>创建时间:{{trainmsg.CreateTime}}</span>
            <span *ngIf="trainmsg.Code">邀请码:{{trainmsg.Code}}</span>
            <!-- <span>邀请码:{{trainmsg.Password}}</span> -->
        </div>
    </div>

    <div class="itembox" *ngIf="canvaslist.length>0">
        <div class="item" *ngFor="let item of smcanvaslist;let i=index" (click)="goto(i)">
            <div class="item-left">
                <div class="createtime">
                    {{item.CreateTime}}
                </div>
                <div class="name" nz-tooltip nzTitle="{{item.Name}}">
                    {{item.Name}}</div>

            </div>
            <div class="item-right" [style.background-color]="item.Backcolor">
                <span class="num">{{item.Num}}</span>
                <div class="tips">已插入标签</div>
            </div>
        </div>
    </div>
    <div class=" nulldata" *ngIf="canvaslist.length==0&&load">
        <img src="./assets/img/null.png" alt="" style="margin-top: 64px;margin-left: 12px;margin-bottom: 56px;">
        <div>暂时没有画布，请添加！</div>
    </div>
    <div class="pagin">
        <nz-pagination [(nzPageIndex)]="nzPageIndex" (nzPageIndexChange)="pagin()" [nzPageSize]="nzPageSize" [nzTotal]="nzTotal"></nz-pagination>
    </div>
</div>

<mask-root *ngIf="addwindow ||passwordwindow" [opacity]="'.7'" (onClick)="addwindow=false;passwordwindow=false;initialize2();"></mask-root>
<div class="addwindow" *ngIf="addwindow">
    <close-root (close)="addwindow=false;"></close-root>
    <div class="add-title">创建画布</div>
    <img src="./assets/img/add.png" class="add-img" alt="">
    <div class="add-label">画布名称 <span>{{form.Name.length}}/20</span></div>
    <input maxlength="20" type="text" class="add-input" placeholder="画布名称" [(ngModel)]="form.Name">
    <div class="add-label">密码 <span>{{form.Password.length}}/4</span></div>
    <div style="display: flex; width: 100%;"><input onkeyup="this.value=this.value.replace(/[^\d]/g,'')" maxlength="4" onafterpaste="this.value=this.value.replace(/[^\d]/g,'') " type="text" class="add-input" style="border-radius: 6px 0 0 6px;" placeholder="密码" [(ngModel)]="form.Password">
        <div class="shuiji" (click)="shuiji()"><img src="./assets/img/code.png" alt=""></div>
    </div>
    <button nz-button nzType="default" class="add-btn" (click)="add()">创 <span style="width:16px"></span> 建</button>
</div>

<div class="addwindow2" *ngIf="passwordwindow">
    <close-root (close)="passwordwindow=false;initialize2();"></close-root>
    <img src="./assets/img/join-logo.png" class="add2-img" alt="">
    <div class="add2-title">{{passwordwindowdata.Name}}</div>
    <div class="add2-subtitle">输入密码，进入画布</div>
    <div class="add-label">密码 <span>{{password.length}}/4</span></div>
    <input onkeyup="this.value=this.value.replace(/[^\d]/g,'')" maxlength="4" onafterpaste="this.value=this.value.replace(/[^\d]/g,'') " type="text" class="add-input" style="border-radius: 6px 0 0 6px;" placeholder="密码" [(ngModel)]="password">
    <button nz-button nzType="default" class="add-btn" (click)="join()">进 <span style="width:16px"></span> 入</button>

</div>